<template>
  <div class="home">
    <div class="home_content" v-if="pageShow">
      <MyNavBar :gobackShow="false" :title="title" />
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 绩效应用-->
        <div class="merits">
          <div class="work_infos">
            <span class="left-user">{{ userInfo.userName }}</span>
            <span class="left-org">{{ userInfo.loginPostInfo.orgName }}</span>
          </div>
          <div
            class="merits_con"
            :style="meritsList.length === 3 ? 'justifyContent: space-around;' : ''"
            v-if="meritsList.length > 0">
            <div
              class="merits_li"
              :class="item.belongPage"
              v-for="item in meritsList"
              :key="item.menuId"
              @click="meritsListClick(item)">
              <img :src="iconImg(item.menuImagePath)" class="merits_li_img" />
              <span>{{ item.menuName }}</span>
            </div>
          </div>
        </div>
        <!-- 系统公告 -->
        <div class="head_news" v-if="workList.length > 0">
          <div class="news_img">
            <img src="../../assets/images/home/system-notice.png" alt="" />
          </div>
          <div class="news_box">
            <div class="news_content">
              <div
                class="news_text"
                :class="{ news_top: item.isTop === 1 }"
                v-for="item in workList"
                :key="item.bulletionId"
                @click="goWorkDetail(item)">
                {{ item.bulletinTitle }}
              </div>
            </div>
            <div class="news_more" @click="goNoticeMore()">
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
        <!-- 待办事件 -->
        <div class="need_event">
          <div class="event_title">
            <div class="need_title">待办事项</div>
            <div class="handled_event" @click="eventsHandled">已办事项</div>
            <div class="work_suggestion" @click="documentaryReply" v-if="workSuggestionSee">纪实回复</div>
          </div>

          <!-- 待办内容 -->
          <div class="event_content">
            <div class="event_list" v-for="(item, index) in eventList" :key="index" @click="eventLook(item)">
              <div class="event_list_info">
                <div class="event_list_info_title">
                  {{ item.needDealName }}
                  <img
                    v-if="item.isRead == '0'"
                    class="read_tip"
                    src="../../assets/images/appraise/unfinsh.png"
                    alt="" />
                </div>
                <div class="event_list_info_label">
                  <div class="left">
                    <span class="event_label">{{ item.busSign }}</span>
                    <span class="event_label_back" v-if="item.tags">{{ item.tags }}</span>
                    <span class="event_time" v-if="['01-01', '01-02', '01-03'].includes(item.busSignId)">
                      {{ item.showStartTime }}
                      <span>-</span>
                      {{ item.showEndTime }}
                    </span>
                    <span class="event_time" v-else>
                      {{ item.showStartTime || item.createTime }}
                    </span>
                  </div>
                </div>
                <div class="due-img" v-if="item.statusType === 'R'">
                  <img src="../../assets/images/home/due-icon.png" alt="" />
                </div>
              </div>
            </div>
            <div class="no_data" v-if="eventList.length === 0">暂无待办事项</div>
            <div class="need_more" @click="getMoveNeedDeals" v-if="eventListTotal > eventList.length">
              查看更多
              <van-icon name="arrow-down" />
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </div>
    <div class="home_content" v-else>
      <van-loading color="#0094ff" />
    </div>
    <!-- 公示榜dialog -->
    <van-popup
      v-model="honourDialogShow"
      class="honour-dialog"
      round
      :close-on-click-overlay="true"
      @close="honourClose">
      <template #default>
        <div class="honour_box">
          <div class="cup">
            <img src="@images/merits/honor-dialog.png" alt="" />
          </div>
          <div class="tit">{{ honourInfo.title || '平时考核公示榜已发布' }}</div>
          <div class="route" @click="goToHonour">点我前往查看</div>
        </div>
      </template>
    </van-popup>

    <vip-dialog :visible.sync="vipDialogVisible"></vip-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import MyNavBar from '@com/MyNavBar'
import { listNeedDeals, workSaveRead, listWorks, getSelectAllBulletinNumByType, updateNeedDealRead } from '@api/api.js'
import { getHonorRollTip } from '@api/api-merits'
import { getListRecursiveMenuByBelong } from '@api/api-public.js'
import VipDialog from '@com/VipDialog.vue'
export default {
  name: 'Home',
  components: {
    MyNavBar,
    VipDialog,
  },
  props: {},
  data() {
    return {
      isLoading: false,
      userInfo: {},
      isGetUserId: false,
      title: '互联网+公务员平时考核',
      // 待办变量
      eventList: [],
      currentPage: 1,
      eventListTotal: 0,
      meritsList: [],
      workSuggestionSee: true, // 是否展示纪实回复
      recordFlag: false,
      workList: [], // 工作通知列表
      showLinkUS: false,
      honourDialogShow: false,
      honourInfo: {},
      vipDialogVisible: false,
      pageShow: false,
    }
  },
  computed: {
    ...mapGetters('role', ['leftNavMenus']),
  },
  watch: {},
  beforeCreate() {
    setTimeout(() => {
      if (window.flutter_inappwebview) {
        if (!localStorage.userId || !localStorage.token) {
          window.resUser = this.resUser
          window.flutter_inappwebview.callHandler('getUser', '')
        }
      }
    }, 300)
  },
  created() {
    if (!sessionStorage.userId && localStorage.userId && localStorage.token) {
      for (let key in localStorage) {
        sessionStorage.setItem(key, localStorage[key])
      }
    }
  },
  mounted() {
    if (localStorage.userId && localStorage.token) {
      this.userInfo = JSON.parse(localStorage.userInfo)
      this.pageShow = true
      this.onRefresh()
      this.getSelectAllBulletinNumByType()
      this.meritsList = this.leftNavMenus[0].menuVOS
    }
  },
  watch: {},
  methods: {
    onRefresh() {
      this.eventList = []
      this.currentPage = 1
      this.eventListTotal = 0
      this.getNeedDeals()
      this.getWorkList()
      this.getHonorRollTip()
    },
    // 获取待办列表方法
    getNeedDeals() {
      listNeedDeals({
        currentPage: this.currentPage,
        pageSize: 5,
        param: '0',
      }).then(res => {
        const data = res.data
        if (data) {
          this.eventList.push(...data.content)
          this.eventListTotal = data.totalSize
        }
        this.isLoading = false
      })
    },
    // 查看更多待办
    getMoveNeedDeals() {
      this.currentPage++
      this.getNeedDeals()
    },

    // 待办事件查看
    eventLook(item) {
      this.$store.state.alive = true
      if (item.isRead === '0') {
        updateNeedDealRead({
          id: item.needDealId,
        }).then(res => {
          if (res.code === 0) {
            this.jumpPage(item)
          }
        })
      } else {
        this.jumpPage(item)
      }
    },
    // 待办跳转
    jumpPage(item) {
      if (['会议管理'].includes(item.busSign)) {
        const str = item.url.replace('meet', 'meetCheck')
        this.$router.push({ path: str })
      } else if (['weekend_duty', '16-01'].includes(item.busSignId)) {
        this.$dialog
          .alert({
            message: '请前往PC端进行相关操作',
          })
          .then(res => {})
        return
      } else {
        this.$router.push({ path: item.url })
      }
    },
    // 绩效应用点击
    meritsListClick(item) {
      console.log('绩效应用点击：', item)
      if (item.menuUrl.toLocaleLowerCase().indexOf('honorroll') > -1) {
        this.$router.push({
          path: '/honorRoll',
          query: {
            from: 'home',
          },
        })
      } else {
        this.$router.push({ path: item.menuUrl })
      }
    },
    // 已办事件
    eventsHandled() {
      this.$router.push('/eventshandled')
    },
    // 纪实回复
    documentaryReply() {
      this.$router.push('/documentaryReply')
    },
    //查看工作通知-更多
    goWorkDetail(item) {
      workSaveRead({
        bulletionId: item.bulletionId,
        isTop: item.isTop,
      }).then(res => {
        this.$router.push({
          path: `/documentDetail`,
          query: { bulletionId: item.bulletionId },
        })
      })
    },
    //获取工作通知
    getWorkList() {
      listWorks({
        pageNum: 1,
        pageSize: 2,
        status: '1',
        type: '0',
        userType: '2',
      }).then(res => {
        if (res.status === 200 && res.data && res.data.content.length) {
          this.workList = [...res.data.content]
        }
      })
    },
    goNoticeMore() {
      this.$router.push('/workNotify')
    },
    getListRecursiveMenuByBelong() {
      getListRecursiveMenuByBelong({ belongPage: 'APP_HOME_APPLY' }).then(res => {
        let { data = [] } = res
        this.meritsList = data
      })
    },
    iconImg(path) {
      if (path) return require(`@/assets/images/home/${path}.png`)
    },
    getSelectAllBulletinNumByType() {
      getSelectAllBulletinNumByType().then(res => {
        if (res.status === 200) {
          let num = 0
          res.data.forEach(item => {
            num += Number(item.unReadNum)
          })
          this.$store.commit('setMessageNum', num)
        }
      })
    },

    // 获取公示榜展示信息
    getHonorRollTip() {
      getHonorRollTip({}).then(res => {
        if (res.status === 200) {
          if (res.data.type != 0) {
            this.honourInfo = res.data || {}
            this.honourDialogShow = true
          }
        }
      })
    },
    // 跳转公示榜
    goToHonour() {
      this.honourDialogShow = false
      this.$router.push('/merits')
    },
    honourClose() {
      this.honourDialogShow = false
    },

    resUser(json) {
      if (json.userId && json.token) {
        this.loginSuccess(json)
      } else {
        localStorage.clear()
        sessionStorage.clear()
        window.flutter_inappwebview.callHandler('logOut', '')
      }
    },

    // 登录成功回调
    async loginSuccess(res) {
      if (res.platform) {
        localStorage.setItem('platform', res.platform)
      } else {
        localStorage.setItem('platform', 'other')
      }
      sessionStorage.setItem('userId', res.userId)
      sessionStorage.setItem('userName', res.userName)
      sessionStorage.setItem('token', res.token)
      sessionStorage.setItem('userInfo', JSON.stringify(res))
      // 本地免登陆验证
      localStorage.setItem('userId', res.userId)
      localStorage.setItem('token', res.token)
      localStorage.setItem('userInfo', JSON.stringify(res))
      localStorage.setItem('tenantId', res.tenantId)

      const expireTime = res.endTime || ''
      if (expireTime) {
        const expireDate = new Date(expireTime)
        let vipTimes = 0
        vipTimes = expireDate.getTime() - new Date(res.loginTime || new Date()).getTime()
        if (vipTimes < 0) {
          res.vipDays = 0
        } else {
          vipTimes = vipTimes / 1000
          res.vipDays = Math.ceil(vipTimes / 3600 / 24)
        }
      } else {
        res.vipDays = 0
      }
      this.$store.state.role.isAgainLogin = true
      this.$store.commit('role/setUserInfo', res)

      try {
        await this.$store.dispatch('role/getUserPermissions')
      } catch (err) {
      } finally {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.pageShow = true
        this.onRefresh()
        this.getSelectAllBulletinNumByType()
        this.meritsList = this.leftNavMenus[0].menuVOS
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  padding-bottom: 51px;
  height: 100%;
  background-color: #f5f5f5;
  background-image: url('../../assets/images/home/home-bg.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  .home_content {
    padding: 46px 16px 0;
    height: 100%;
    /deep/.van-pull-refresh {
      // flex: 1;
      height: 100%;
      overflow-y: auto;
      .van-pull-refresh__track {
        min-height: 100%;
        height: 0;
        padding-top: 12px;
      }
    }
    // 绩效应用
    .merits {
      padding: 16px 12px 0;
      border-radius: 5px;
      background-color: #ffffff;
      .work_infos {
        color: #000000;
        font-size: 13px;
        display: flex;
        align-items: center;
        padding-bottom: 14px;
        border-bottom: 1px solid #e6ecf8;
        .left-user {
          font-size: 16px;
          font-weight: bold;
          font-weight: bold;
          margin-right: 16px;
        }
      }
      .merits_con {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        background-color: #ffffff;
        border-radius: 10px;
        padding: 20px 0;
        .merits_li {
          position: relative;
          width: 25%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          flex-direction: column;
          // margin: 5px 0 10px;
          &:nth-child(n + 5) {
            margin-top: 12px;
          }
          .merits_li_img {
            width: 36px;
            height: 36px;
          }
          span {
            margin-top: 8px;
            font-size: 14px;
            text-align: center;
          }
        }
        // .APP_BOARD {
        //   .merits_li_img {
        //     width: 20px;
        //   }
        // }
      }
    }

    // 公告
    .head_news {
      padding: 11px 12px;
      padding-right: 6px;
      margin-top: 15px;
      background-color: #ffffff;
      box-shadow: 0px 0px 10px 1px rgba(95, 95, 95, 0.1);
      border-radius: 5px;
      display: flex;
      align-items: stretch;
      .news_img {
        width: 25px;
        min-width: 25px;
        height: 55px;
        padding-right: 11px;
        margin-right: 11px;
        border-right: 1px solid #dddddd;
        img {
          width: 15px;
          height: 100%;
        }
      }
      .news_box {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
      }
      .news_content {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex: 1;
        height: 100%;
        overflow: hidden;
        .news_text {
          width: 100%;
          color: #666666;
          @include ellipsis;
        }
        .news_top::before {
          content: '置顶';
          font-size: 12px;
          color: #ffffff;
          width: 28px;
          height: 16px;
          background: #2e7de8;
          border-radius: 2px;
          margin-right: 5px;
          display: inline-block;
          text-align: center;
          background-image: linear-gradient(16px);
        }
      }
      .news_more {
        width: 25px;
        min-width: 25px;
        font-size: 20px;
        color: #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    // 待办事件
    .need_event {
      margin-top: 25px;
      padding-bottom: 3px;
      .event_title {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        font-size: 16px;
        color: #666666;
        font-weight: 500;
        .need_title {
          font-weight: 700;
          color: #333333;
          font-size: 18px;
        }
        .handled_event,
        .work_suggestion {
          margin-left: 21px;
          font-weight: 500;
          opacity: 0.8;
        }
        .work_suggestion {
          position: relative;
          .readTip {
            position: absolute;
            top: 0;
            right: -4px;
            height: 7px;
            width: 7px;
          }
        }
      }

      // 待办内容
      .event_content {
        background-color: #ffffff;
        box-shadow: 0px 0px 10px 1px rgba(95, 95, 95, 0.1);
        border-radius: 5px;
        padding: 5px 12px 0;
        margin: 12px 0;
        .event_list {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-top: 12px;
          padding-bottom: 16px;
          border-bottom: solid 1px #eeeeee;
          &:last-child {
            border-bottom: none;
          }
          .event_list_info {
            width: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            .event_list_info_title {
              font-size: 16px;
              color: #333333;
              font-weight: bold;
              @include ellipsis;
              position: relative;
              .read_tip {
                position: absolute;
                top: 0;
                height: 7px;
                width: 7px;
              }
            }
            .event_list_info_label {
              color: #999999;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 8px;

              .left {
                display: flex;
                align-items: center;
                .event_label {
                  background-color: #f9f1e8;
                  border-radius: 2px;
                  padding: 3px 8px;
                  font-size: 12px;
                  color: #a57d60;
                }
                .event_label_back {
                  background-color: #d9001b;
                  border-radius: 4px;
                  padding: 3px 8px;
                  font-size: 12px;
                  color: #fff;
                  margin-left: 6px;
                }
                .event_time {
                  font-size: 12px;
                  padding-left: 6px;
                  margin-left: 6px;
                  border-left: 1px solid #999999;
                }
              }
            }
            .due-img {
              position: absolute;
              right: 5px;
              top: 50%;
              transform: translateY(-50%);
              width: 46px;
              height: 36px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }

        .no_data {
          width: 100%;
          font-size: 13px;
          color: #888888;
          padding-bottom: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .need_more {
          width: 100%;
          font-size: 13px;
          color: #888888;
          padding: 15px 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    /deep/.title_box {
      width: 100% !important;
    }
  }
  .link_show_no {
    right: 0;
  }
  .link_show {
    right: -30px;
  }
  .icon_show_no {
    margin-left: 0;
  }
  .icon_show {
    margin-left: -30px;
  }
  .link_us {
    position: absolute;
    top: 240px;
    transform: translateX(-50%);
    display: flex;
    .link_us_man {
      display: flex;
      align-items: center;
      background-color: #004db6;
      color: #fff;
      font-size: 12px;
      height: 30px;
      border-radius: 15px;
      padding-left: 10px;
      transition: width 0.1s ease;
    }
    .link_us_circle {
      height: 30px;
      width: 30px;
      background-color: #fff;
      border-radius: 50%;
    }
    .iconfont {
      color: #004db6;
      font-size: 30px;
    }
  }
}
.home::-webkit-scrollbar {
  display: none;
}
/deep/.van-pull-refresh::-webkit-scrollbar {
  display: none;
}
.honour-dialog {
  width: 90vw;
  max-width: 700px;
  background-color: transparent;
  .honour_box {
    background-color: #ffffff;
    text-align: center;
    font-size: 12px;
    position: relative;
    border-radius: 10px;
    padding-bottom: 30px;
    .tit {
      margin-top: -10px;
      font-size: 16px;
      color: #333333;
    }
    .cup {
      position: relative;
      img {
        width: 100%;
      }
    }
    .route {
      font-size: 16px;
      text-decoration: underline;
      color: #2670df;
      margin: 15px 0 0;
    }
    .route:hover {
      cursor: pointer;
    }
  }
}
</style>
